<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>books_list</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/books_list.css">
    <script type="text/javascript" src="/static/js/jquery-1.7.2.js"></script>
    <script>
        $(function (){
            $(".borrowBook").click(function (){
                var id=$(this).attr("id");
                var url="/borrowBook";
                var param={"bookId":id};
                $.post(url,param,function (res){
                    if(res =="你还没有登录"){
                        location="/pages/user/login.html";
                    }else{
                        //将响应信息加到span中
                        $("#borrowMsg").text(res);
                    }
                });
            });
        });
    </script>
</head>
<body>
<div class="header">
    {{if .IsLogin}}
    <div>
            普通用户：{{.Username}}
    </div>
    <div>
        <a href="/logout">注销</a>
        <a href="/getBookByTitleOrAuthor">图书列表</a>
        <a href="/getBorrowRecord">我的借阅</a>
        <a href="/main">返回</a>
    </div>
    {{else}}
        你还未登录<a href="/main">返回</a>
    {{end}}
</div>
<div id="main">
    <form method="post" action="/getBookByTitleOrAuthor">
        请输入你要查找的书的书名：<input name="title" type="text">
        作者名：<input name="author" type="text">
        <input type="submit" value="查找">
    </form>
    <div><span id="borrowMsg"></span></div>
        <div class="books_list">
            {{range .Book}}
                <div class="img_div"><img src="{{.ImgPath}}" width="100px"></div>
                <div class="info_div">
                    <p>书名:{{.Title}}</p>
                    <p>作者:{{.Author}}</p>
                    <p>出版社:{{.Publish}}</p>
                    <p>定价:{{.Price}}</p>
                    <p>借阅数量:{{.Borrow}}</p>
                    <p>剩余数量:{{.Remain}}</p>
                    {{if .Remain}}
                        <button id="{{.Id}}" class="borrowBook">借书</button>
                    {{else}}
                        <div>{{.Title}}已经被借完啦</div>
                    {{end}}
                </div>
            {{end}}
        </div>
    <div>
        {{if .IsHaveLast}}
            <a href="/getBookByTitleOrAuthor?title={{.Title}}&author={{.Author}}">首页</a>
            <a href="/getBookByTitleOrAuthor?currentPage={{.GoLast}}&title={{.Title}}&author={{.Author}}">上一页</a>
        {{end}}
        当前是{{.CurrentPage}}页,一共{{.TotalPages}}页,共{{.TotalRows}}记录
        {{if .IsHaveNext}}
            <a href="/getBookByTitleOrAuthor?currentPage={{.GoNext}}&title={{.Title}}&author={{.Author}}">下一页</a>
            <a href="/getBookByTitleOrAuthor?currentPage={{.TotalPages}}&title={{.Title}}&author={{.Author}}">末页</a>
        {{end}}
        到<input type="text" name="cp" value="{{.CurrentPage}}" id="cp_input">页
        <input type="submit" id="sub" value="确定">
        <script>
            $("#sub").click(function (){
                var currentPage = $("#cp_input").val();
                if(currentPage<={{.TotalPages}}){
                    location = "/getBookByTitleOrAuthor?currentPage="+currentPage+"&title={{.Title}}&author={{.Author}}";
                }else{
                   alert("最大页是"+"{{.TotalPages}}")
                }
            });
        </script>
    </div>
</div>

</body>
</html>